<template>
	<div class="multicolorLabelConfig">
		<div class="multicolorLabelConfig-head">
			<div>{{gaugeI18n("percentage","百分比")}}</div>
			<div>{{gaugeI18n("axisColor","轴线颜色")}}</div>
		</div>
		<div class="multicolorLabelConfig-list">
			<div class="multicolorLabelConfig-common" v-for="(multi,index) in multicolorLabel" :key="index">
				<div class="multicolorLabelConfig-common-le">
                    <MinusCircleOutlined @click="multiDelete(index)"/>
                    <a-input-number style="width: 130px" v-model:value="multi.value" :min="0" :max="100"/>
				</div>
				<div>
					<a-input style="width: 90%;margin: auto" v-model:value="multi.color"  type="color"/>
				</div>
			</div>
		</div>
		<div class="addColor" @click="add">
            <PlusCircleOutlined class="addColor-icon"/>
            <div>{{gaugeI18n("newColor","新增颜色")}}</div>
        </div>
	</div>
</template>

<script>
export default {
	name: "multicolorLabel-config",
	props:['multicolorLabel'],
	data(){
		return{

		}
	},
	mounted() {
	},
	methods:{
		gaugeI18n(name,text,key){
			return this.$ti18(name,text,"gaugeChartLang",key);
		},
		multiDelete(index){
			this.multicolorLabel.splice(index,1);
		},
		add(){
			this.multicolorLabel.push({
				value:30,
				color:'#4285f4'
			})
		}
	}
}
</script>

<style scoped>
.multicolorLabelConfig{
	margin-right: 20px;
}
.multicolorLabelConfig-head{
	display: flex;
	height: 40px;
	border: 1px solid #d9d9d9;
	border-right: none;
	border-radius: 5px 5px 0px 0px;
}
.multicolorLabelConfig-head>div{
	flex: 1;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-right: 1px solid #d9d9d9;
}
.multicolorLabelConfig-list{
	border: 1px solid #d9d9d9;
	border-top: none;
	border-bottom: none;
}
.multicolorLabelConfig-common{
	display: flex;
	height: 40px;
	border-bottom: 1px solid #d9d9d9;
}
.multicolorLabelConfig-common >div{
	height: 40px;
	flex: 1;
	display: flex;
	align-items: center;
}
.multicolorLabelConfig-common >div:nth-child(1){
	border-right: 1px solid #d9d9d9;
}
.multicolorLabelConfig-common-le span{
	margin-left: 10px;
	font-size: 18px;
	margin-right: 10px;
	cursor: pointer;
}
.multicolorLabelConfig-common-le span:hover{
	color: #4285f4;
  margin-left: 10px;
}
.addColor{
	display: flex;
	align-items: center;
	width: 100%;
	text-align: center;
	border: 1px solid #d9d9d9;
	height: 35px;
	line-height: 35px;
	color: #4285f4;
	font-size: 14px;
	margin-bottom: 15px;
	border-top: none;
	text-align: center;
	margin-bottom: 10px;
	cursor: pointer;
}
.addColor-icon{
	margin-right: 5px;
	font-size: 18px;
	margin-left: 140px;
}
</style>
